<template>
  <div>
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="queryInfo.username"
            placeholder="请输入内容">
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-button size="small" type="primary" icon="el-icon-search" @click="getUserData">搜索</el-button>
          <el-button size="small" type="primary" @click="resetBtn">重置</el-button>
        </el-col>
      </el-row>
      <!-- 新增用户 -->
      <div class="searchFeacher">
        <el-button @click="userAddDialogVisible=true" class="addBtn" size="small" type="primary" icon="el-icon-edit">新增用户</el-button>
      </div>
      <!-- 提示信息 -->
      <el-alert class="alert_Tag"
        :closable="false"
        type="info"
        show-icon>
        <p slot="title">共{{this.total}}条记录</p>
      </el-alert>
      <!-- 表格内容区域 -->
      <el-table
      border
      :data="list"
      style="width: 100%">
        <el-table-column
          prop="id"
          align="center"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="permission_group_title"
          label="权限组名称">
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色">
        </el-table-column>
        <el-table-column
          width="180px"
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editUserBtn(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="removeUserBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryInfo.page"
        :page-sizes="[2, 4, 6, 8, 10]"
        :page-size="this.queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
   <!-- 新增用户 -->
    <el-dialog
      @close="closeUserAddDialog"
      title="新增用户"
      :visible.sync="userAddDialogVisible"
      width="50%">
      <el-form ref="userInfo" :rules="userAddRules" :model="addUserInfo" label-width="120px">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="addUserInfo.username"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="addUserInfo.email"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="addUserInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="addUserInfo.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称 ">
          <el-select v-model="addUserInfo.permission_group_id" placeholder="请输入">
            <el-option v-for="item in permissionList" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="addUserInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="Please input"
            v-model="addUserInfo.introduction">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userAddDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="postAddUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog
      title="编辑用户"
      :visible.sync="userEditDialogVisible"
      width="50%">
      <el-form ref="editUser" :model="editUserInfo" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="editUserInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editUserInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="editUserInfo.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称 ">
          <el-select v-model="editUserInfo.permission_group_id" placeholder="请输入">
            <el-option v-for="item in permissionList" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="editUserInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="Please input"
            v-model="editUserInfo.introduction">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="postEditUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '@/api/base/users.js'
import { list as permissionsList } from '@/api/base/permissions.js'
import { add } from '@/api/base/users.js'
import { update } from '@/api/base/users.js'
import { remove } from '@/api/base/users.js'
export default {
  name: "user",
  data () {
    // 1.邮箱的自定义校验规则
    const checkEmail = (rule, value, callback) => {
      const reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
      if (reg.test(value)) {
        // 校验成功直接返回
        callback()
      } else {
        callback(new Error('邮箱格式不正确'))
      }
    }
    return {
      queryInfo: {
        page: 1,
        pagesize: 10,
        keywords: '',
        username: ''
      },
      list: [],
      editUserInfo: {},
      permissionList: [],
      total: 0,
      // 增加用户
      userAddDialogVisible: false,
      userEditDialogVisible: false,
      addUserInfo: {
        avatar: '',
        password: '123456',
        email: '132789@qq.com',
        introduction: '秀一下自己',
        permission_group_id: '',
        phone: '13298754612',
        role: 'admin',
        username: '徐小花'
      },
      userAddRules: {
        username: [
          { required: true, message: '请输入正确的姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入正确的邮箱', trigger: 'blur' },
          { min: 6, max: 15, regs: '/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/', message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入正确的密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getUserData()
    this.getRootList()
  },

  methods: {
    // searchList () {
    //   this.queryInfo.keywords =
    // },
    // 获取数据
    async getUserData () {
      try {
        const { data: res } = await list(this.queryInfo)
        console.log(res)
        this.list = res.list
        this.total = res.counts
      } catch (err) {
        console.log(err)
      }
    },
    // 分页
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getUserData()
    },
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getUserData()
    },
    // 获取权限组
    async getRootList () {
      const { data: res } = await permissionsList()
      this.permissionList = res.list
      console.log(this.permissionList)
    },
    // 表单重置
    closeUserAddDialog () {
      this.$refs.userInfo.resetFields()
    },
    // 添加用户
    postAddUser () {
      this.$refs.userInfo.validate(async flag => {
        if (!flag) return
        try {
          const { data: res } = await add(this.addUserInfo)
          console.log(res)
          this.getUserData()
          this.userAddDialogVisible = false
        } catch (err) {
          console.log(err)
        }
      })
    },
    // 编辑用户
    async editUserBtn (row) {
      console.log(row)
      this.editUserInfo = row
      this.userEditDialogVisible = true
    },
    postEditUser () {
      delete this.editUserInfo.permission_group_title
      delete this.editUserInfo.is_deleted
      delete this.editUserInfo.last_update_time
      // this.editUserInfo.permission_group_title = null
      try {
        const { data: res } = update(this.editUserInfo)
        console.log(res)
      } catch (err) {
        console.log(err)
      }
      this.getUserData()
      this.userEditDialogVisible = false
    },
    // 删除用户
    removeUserBtn (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        78
        const { data: res } = await remove(row)
        this.$message.success('删除成功!')
        this.getUserData()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 搜索重置
    resetBtn () {
      this.getUserData()
    }
  }
}
</script>

<style scoped lang='less'>
.searchFeacher {
  position: relative;
  .addBtn {
  position: absolute;
  top: 20px;
  right: 0px;
}
}
.alert_Tag {
  margin: 80px 0 15px 0;
}
</style>
